<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>个人中心</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" type="text/css" href="../../common/bootstrap/css/bootstrap.css" media="all">
	<link rel="stylesheet" type="text/css" href="../../common/layui/css/layui.css" media="all">
	<link rel="stylesheet" type="text/css" href="../../common/global.css" media="all">
	<link rel="stylesheet" type="text/css" href="../../css/customer_list.css" media="all">
</head>
<style>
	.order_massage{
		width: 100%;
		margin-left: 30px;
		font-size: 14px;
	}
	.order_massage li{
		padding: 20px 10px;
	}
	.order_massage li:first-child{
		padding-top: 0px;
	}
	.order_massage li:last-child{
		border-bottom: none;
	}
	.order_massage_title{
		float: left;
		width: 33%;
	}
	.order_address_title{
		float: left;
		width: 100%;
	}
	.layui-input-block{
		margin-left: 95px;
	}
</style>
<body>
<!-- 添加车辆和司机 -->
<div class="layui-fluid content_box">
	<div class="main_content_wrap">
		<p class="add_title">基础信息</p>
		<div class="layui-card-body" id="orderView">
		</div>
		<!-- 按钮 -->
		<!--<div class="layui-form-item text-center">-->
			<!--<div class="layui-input-block" style="max-width: none">-->
				<!--<button class="layui-btn site-demo-active" id="edit">修改</button>-->
			<!--</div>-->
		<!--</div>-->
	</div>
</div>
<script id="orderDetail" type="text/html">
	<ul class='order_massage'>
		<li>
			<span class="order_massage_title">公司名称：{{d.suppliers_company_name}}</span>
			<span class="order_massage_title">联系人：{{d.contact_person_name}}</span>
			<span class="order_massage_title">联系电话：{{d.contact_person_phone}}</span>
		</li>
		<li>
			<span class="order_massage_title">税率：{{d.tax_rate}}%</span>
			<span class="order_massage_title">服务品牌：{{d.service_brand}}</span>
			<span class="order_massage_title">到期时间：{{d.due_time}}</span>
		</li>
		<li>
			<span class="order_address_title">所在地址：{{d.address_area}}{{d.address_detail}}</span>
		</li>
	</ul>
</script>
<script type="text/html" id="companyForm">
	<form lay-filter="companyForm" class="layui-form model-form">
		<input name="id" type="hidden"/>
		<div class="layui-form-item">
			<label class="layui-form-label">公司名称</label>
			<div class="layui-input-block">
				<input name="suppliers_company_name" placeholder="请输入公司名称" type="text" class="layui-input"
					   maxlength="155" lay-verify="required" required/>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">联系人</label>
			<div class="layui-input-block">
				<input type="text" name="contact_person_name" placeholder="请输入联系人姓名" autocomplete="off" class="layui-input" lay-verify="required" required>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">联系电话</label>
			<div class="layui-input-block">
				<input type="text" name="contact_person_phone" placeholder="请输入联系人电话" autocomplete="off" class="layui-input" lay-verify="required" required>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">所在地区</label>
			<div class="layui-input-inline selectArea more_in">
				<select name="province" id="province" lay-filter="province" lay-search lay-verify="required" required>
					<option value="">请选择</option>
				</select>
			</div>
			<div class="layui-input-inline selectArea">
				<select name="city" id="city" lay-filter="city" lay-search lay-verify="required" required>
					<option value="">请选择</option>
				</select>
			</div>
			<div class="layui-input-inline selectArea">
				<select name="district" id="district" lay-search>
					<option value="">请选择</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">详细地址</label>
			<div class="layui-input-block">
				<input type="text" name="address_detail" placeholder="请输入详细地址" autocomplete="off" class="layui-input" lay-verify="required" required>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">服务品牌</label>
			<div class="layui-input-block">
				<input type="text" name="service_brand" placeholder="多个品牌用逗号分开" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label must">税率</label>
			<div class="layui-input-inline more_in">
				<input name="tax_rate" placeholder="请输入税率" type="number" class="layui-input"
					   max="100" lay-verify="required" required/>
			</div>
			<div class="layui-form-mid layui-word-aux">%</div>
		</div>
		<div class="layui-form-item text-center">
			<button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
			<button class="layui-btn" lay-filter="companyFormSubmit" lay-submit>保存</button>
		</div>
	</form>
</script>
<script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../../js/jquery.cookie.js"></script>
<script type="text/javascript" src="../../common/layui/layui2.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript" src="../../js/main.js"></script>
<script type="text/javascript" src="../../js/area.js"></script>
<script>
	layui.use(['jquery','form','upload','laydate', 'admin','table','formSelects','laytpl'], function(){
		var $ = layui.jquery;
		var form = layui.form;
		var table = layui.table;
		var upload = layui.upload;
		var laydate = layui.laydate;
		var formSelects = layui.formSelects;
		var admin = layui.admin;
		var laytpl = layui.laytpl;

		var userInfo = JSON.parse(getSessionStorage('gysuname'));

        var DISABLED = 'layui-btn-disabled';

		getInfo();
		function getInfo(){
			var orderDetail = document.getElementById('orderDetail');
			var getTpl = orderDetail.innerHTML;
			var view = document.getElementById('orderView');
			laytpl(getTpl).render(userInfo, function(html){
				view.innerHTML = html;
			});
		}
		form.render();

		$('#edit').click(function () {
			showEditModel();
		});

		function showEditModel() {
			admin.open({
				type: 1,
				area: '800px',
				offset: '65px',
				title: '修改信息',
				content: $('#companyForm').html(),
				success: function (layero, index) {
					$(layero).children('.layui-layer-content').css('overflow', 'visible');
					generateFirstLevelarea();
					var address_area = userInfo.address_area;
					let address_areas = address_area.split(' ');
					console.log(address_areas)
					userInfo.province = address_areas[0];
					userInfo.city = address_areas.length>=2?address_areas[1]:'';
					userInfo.district = address_areas.length>=3?address_areas[2]:'';

					if(userInfo.province){
						getSencondLevelarea(userInfo.province);
						form.val('companyForm',userInfo)
						form.render();
						if(userInfo.city){
							getThreeLevelarea(userInfo.city);
						}
					}
					form.val('companyForm', userInfo);
					form.render();
				}
			})
		}

		form.on('submit(companyFormSubmit)', function (d) {
			if(d.field.district){
				d.field.address_area = d.field.province+' '+d.field.city+' '+d.field.district;
			}else if(d.field.city){
				d.field.address_area = d.field.province+' '+d.field.city;
			}else {
				d.field.address_area = d.field.province?d.field.province:'';
			}
			layer.load(2);
			send_req('User/modifyCompany', d.field, function (data) {
				layer.closeAll('page');
				layer.closeAll('loading');
				userInfo = data;
				layer.msg('操作成功', {icon: 1},function (){
					sessionStorage.setItem("gysuname", JSON.stringify(data));
					getInfo();
				});
			});
			return false;
		});

		/***************地址区域初始化**********************/
		function generateFirstLevelarea() {
			var area_first_str = '<option value="">请选择</option>';
			for (var i = 0; i < provinceList.length; i++) {
				area_first_str += '<option value="' + provinceList[i].value + '">' + provinceList[i].value + '</option>';
			}
			$('#province').html(area_first_str);
		}

		form.on('select(province)',function (data) {
			var selectedFirstLevel = data.value;
			// 清空并隐藏第二、三级菜单
			$('#city').empty().attr('disabled', true);
			$('#district').empty().attr('disabled', true);
			// 生成第二级菜单
			getSencondLevelarea(selectedFirstLevel)
			form.render();
		});

		function getSencondLevelarea(selectedFirstLevel){
			var secondLevelOptions = '';
			if (selectedFirstLevel) {
				var firstLevelData = provinceList.find(item => item.value === selectedFirstLevel);
				if (firstLevelData && firstLevelData.children && firstLevelData.children.length > 0) {
					secondLevelOptions = '<option value="">请选择</option>';
					for (var j = 0; j < firstLevelData.children.length; j++) {
						secondLevelOptions += '<option value="' + firstLevelData.children[j].value + '">' + firstLevelData.children[j].value + '</option>';
					}
					$('#city').html(secondLevelOptions).attr('disabled', false);
					form.render();
					// 预备生成第三级菜单的逻辑，这里假设第二级选择后会填充第三级
				}
			}
		}
		form.on('select(city)',function (data) {
			var selectedSecondLevel = data.value;
			getThreeLevelarea(selectedSecondLevel)
			form.render();
		});
		function getThreeLevelarea(selectedSecondLevel){
			var selectedFirst = $('#province').val();
			var firstLevelData = provinceList.find(item => item.value === selectedFirst);
			var secondLevelData = firstLevelData.children.find(item => item.value === selectedSecondLevel);
			if (secondLevelData && secondLevelData.children && secondLevelData.children.length > 0) {
				var thirdLevelOptions = '<option value="">请选择</option>';
				for (var k = 0; k < secondLevelData.children.length; k++) {
					thirdLevelOptions += '<option value="' + secondLevelData.children[k].value + '">' + secondLevelData.children[k].value + '</option>';
				}
				$('#district').html(thirdLevelOptions).attr('disabled', false).parent().show();
			} else {
				$('#district').empty().attr('disabled', true);
			}
			form.render();
		}
		/***************地址区域初始化**********************/
    });
</script>
</body>
</html>